<template>
	<div class="platformrecord">
		<!-- 新增规则按钮v-if="showBtn" -->
    	<el-button class="addbtn" type="primary" @click="addruleVisible = true" v-permission='"8c156c2f1d4e434780a634ce328e39ef"'  >新增充值规则</el-button>

    	<!-- 列表展示 -->
	    <el-table :data="tableData" style="width: 100%">
	      <!-- <el-table-column prop="id" label="编号" align="center">
	      </el-table-column> -->
	      <el-table-column prop="ruleName" label="规则名称" align="center">
	      </el-table-column>
	      <el-table-column prop="describes" label="规则说明" align="center">
	      </el-table-column>
	      <el-table-column prop="parkCount" label="适用停车场" align="center">
	      </el-table-column>
	      <el-table-column prop="monthAmount" label="月付" align="center">
	      </el-table-column>
	      <el-table-column prop="quarterAmount" label="季付" align="center">
	      </el-table-column>
	      <el-table-column prop="yearAmount" label="年付" align="center">
	      </el-table-column>
	      <el-table-column prop="buyCount" label="平台购买" align="center">
	      </el-table-column>
	      <el-table-column prop="soldCount" label="平台售出" align="center">
	      </el-table-column>
	      <el-table-column label="状态" align="center">
	          <template slot-scope="scope">
	            <span>{{ scope.row.status | statusFilter }}</span>
	          </template>
	      </el-table-column>
	      <el-table-column label="操作" align="center">
	        <template slot-scope="scope">
		         <span v-if="scope.row.status == 1" class="btn" @click="downBtn(scope.$index,scope.row)" v-permission='"f6ddd43770564a75b92ee888bd128d78"'>下线</span>
		         <span v-if="scope.row.status != 1" class="btn" @click="upBtn(scope.$index,scope.row)" v-permission='"f6ddd43770564a75b92ee888bd128d78"'>上线</span>
		         <span class="btn" @click="updatarow=scope.row;updataVisible=true" v-permission='"9226ba9bfb9f4fddaeeec62531c92e7e"'>修改</span>
	        </template>
	      </el-table-column>
	    </el-table>

	    <!-- 分页 -->
	    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="tal" :hide-on-single-page="true" background :page-size="10" :page-sizes="[5,8,10]" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" style="margin-top:30px;">
	    </el-pagination>

	    <!-- 确认上、下线弹框 -->
	    <el-dialog  :visible.sync="downVisible" width="400px"  :before-close="handleClose">
	        <p class="tips">是否确认下线？</p>
	        <el-button class="btn1" type="success" @click="downline">确认下线</el-button>
	    </el-dialog>
	    <el-dialog  :visible.sync="upVisible" width="400px"  :before-close="handleClose">
	        <p class="tips">是否确认上线？</p>
	        <el-button class="btn1" type="success" @click="upline">确认上线</el-button> 
	    </el-dialog>

	    <!-- 新增月租卡弹框 -->
	    <el-dialog title="新增月租卡规则" :visible.sync="addruleVisible">
	    	<addRecord @refresh="getTableData" @closeDialog="addruleVisible = false"/>
	    </el-dialog>
	    <!-- 修改月租卡弹框 -->
	    <el-dialog title="修改月租卡规则" :visible.sync="updataVisible">
	    	<updataRecord :row ="updatarow" @refresh="getTableData" @closeDialog="updataVisible = false"/>
	    </el-dialog>

	</div>
</template>
<script>
	import axios from 'axios'
	import qs from 'qs'
	import addRecord from './components/addRecord'
	import updataRecord from './components/updataRecord'

	export default {
		name:'platformRecord',
		components: { addRecord, updataRecord},
		filters: {
		    statusFilter(status) {
		      if (status == 0) {
		        return '停用'
		      }
		      if (status == 1) {
		        return '启用'
		      }
		    }
		},
		data() {
			return {
				updatarow:'',
				addruleVisible: false,
				updataVisible: false,
				showBtn: true,
      			downVisible:false,
      			upVisible:false,
				tableData: [],
				searchData: {},
      			tal:null,
      			currentPage:1,
      			selectedRow:{},
			}
		},
		mounted() {
			this.getTableData();//初始加载
		},
		methods: {
			//数据初始加载  分页查询数据  两者共用一个接口
		    getTableData(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      this.searchData.userId = userId;
		      this.searchData.token = token;
		      this.searchData.ruleType = 0;
		      axios({
		        method:'post',
		        url:'/api/bElecard/selectAllEleCard',
		        data:qs.stringify(this.searchData)
		      }).then((res) => {
		        this.tableData = res.data.data.list;
		        this.tal = res.data.data.total;// 获取总条数
		        if(this.tableData != null){
		          this.showBtn = false;
		        }
		      })
		    },
		    //分页修改每页显示条数
		    handleSizeChange(val){
		      this.searchData.pageSize = val;
		      this.getTableData();
		    },
		    //分页跳转页面
		    handleCurrentChange(val){
		      this.searchData.page = val;
		      this.getTableData();
		    },
		    downBtn(index,row){
		      this.downVisible = true;
		      this.selectedRow = row;
		    },
		    downline(){
		    	this.downOrUp();
		        this.downVisible = false;
		    },
		    upBtn(index,row){
		      this.upVisible = true;
		      this.selectedRow = row;
		    },
		    upline(){
		      this.downOrUp();
		      this.upVisible = false;
		    },
		    downOrUp(){
		      var userId = sessionStorage.getItem("userId");
		      var token = sessionStorage.getItem("token");
		      this.selectedRow.userId = userId;
		      this.selectedRow.token = token;
		      axios({
		        method:'post',
		        url:'/api/bElecard/updateStatus',
		        data:qs.stringify(this.selectedRow)
		      }).then((res) => {
		        this.getTableData();
		      })
		    },
		    handleClose(done) {
	        this.$confirm('确认关闭？')
	          .then(_ => {
	            done();
	          })
	          .catch(_ => {});
	        },


		}
	}

</script>
<style scoped>
	.platformrecord{
	  padding: 40px;
	}
	.addbtn{
	  float: right;
	  margin-bottom: 20px;
	  padding: 8px 10px;
	}
	.btn{
	  font-size: 12px;
	  color:#7EC0EE;
	  margin: 0 5px;
	}
	.btn:hover{
	  cursor: pointer;
	}
	.btn1{
	  margin-left:50%;
	  margin-top: 30px;
	  transform: translateX(-50%);
	}
	.tips{
	  text-align: center;
	  font-size: 18px;
	  font-weight: bold;
	}
	
	
	
	
	
	


</style>